{% extends 'layout.html' %}
{% block content %}
<div class="bs-example" data-example-id="table-within-panel">
    <div style="margin-bottom: 10px" class="clearfix">
        <div>
            <input id='btnAdd' type="button" value='新建订单' class='btn btn-primary' data-toggle='modal'
                data-target='#myModal'>
        </div>
        <!--新建订单（对话框）-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新建订单</h4>
                    </div>
                    <div class="modal-body">
                        <form id="formAdd" novalidate>
                            <div class="clearfix">
                                {% for field in form %}
                                <div class="col-xs-6">
                                    <div class="form-group" style="position: relative;margin-bottom: 20px;">
                                        <label>{{ field.label }}</label>
                                        {{ field }}
                                        <span class="error-msg" style="color: red; position: absolute;"></span>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="btnSave" type="button" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <!--删除（对话框）-->
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4>确认删除订单吗</h4>
                    <p style="padding-bottom:30px;padding-top:15px;">删除后所有数据相关数据被清除</p>
                      <button id="btnConfirmDelete" type="button" class="btn btn-danger">确认</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </p>
                  </div>
            </div>
          </div>
        <div style="float:right;width:260px" class="input-group">
            <form action="" method="get">
                <input type="text" placeholder="搜索" name="q" class="form-control" style="float:left;width:200px;">
                <input type="submit" value="提交" class="btn btn-success" style="float:right;">
            </form>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
            订单列表
        </div>
        <table class="table  table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>订单号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>支付状态</th>
                    <th>管理员</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for obj in queryset %}
                <tr>
                    <td>{{obj.id}}</td>
                    <td>{{obj.oid}}</td>
                    <td>{{obj.title}}</td>
                    <td>{{obj.price}}</td>
                    <td>{{obj.get_status_display}}</td>
                    <td>{{obj.admin}}</td>
                    <td>
                        <input uid="{{ obj.id }}" type="button" class="btn btn-primary btn-xs btn-edit" value="编辑"> 
                        <input uid="{{ obj.id }}" type="button" class="btn btn-danger btn-xs btn-delete" value="删除">
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <ul class="pagination" style="margin-top:0px;">
        {{ page_string }}
        <form action="" style="display:inline;">
            <input type="text" placeholder="搜索" name="page" class="form-control" style="width:60px;float:left;">
            <input type="submit" value="提交" class="btn btn-success" style="float:right;">
        </form>
    </ul>
</div>
{% endblock %}
{% block js %}
<script type='text/javascript'>
    /**  这段ajax代码生成的模态框闪退
    $(function() {
        bindBtnAddEvent();
    })
    function bindBtnAddEvent() {
        $("#btnAdd").click(function() {
            // 点击新建按钮，显示对话框
            $('#myModal').modal('show');
        })
    }
    */

    var DELETE_ID;

    $(function() {
        bindBtnSaveEvent();
        bindBtnDeleteEvent();
        bindBtnConfirmDeleteEvent();
        bindBtnEditEvent();
    })
    function bindBtnSaveEvent() {
        $('#btnSave').click(function() {

            $('.error-msg').empty();

            $.ajax({
                url: '/order/add/',
                type: 'post',
                data: $('#formAdd').serialize(),
                dataType: 'JSON',
                success: function(res){
                    if (!res.status) {
                        $.each(res.error, function(name, errorList){
                            $("#id_" + name).next().text(errorList[0]);
                        })
                    } else {
                        $('#formAdd')[0].reset();
                        $('#myModal').modal('hide');
                        location.reload();
                    }
                }
            })
        })
    }
    
    function bindBtnDeleteEvent() {
        $('.btn-delete').click(function() {
            $('#deleteModal').modal('show');
            DELETE_ID = $(this).attr('uid')
        })
    }

    function bindBtnConfirmDeleteEvent() {
        $('#btnConfirmDelete').click(function() {
            $.ajax({
                url: '/order/delete/',
                type: 'GET',
                data: {
                    uid: DELETE_ID
                },
                dataType: 'JSON',
                success: function(res) {
                    if(res.status) {
                        $('#deleteModal').modal('hide');
                        location.reload();
                    } else {
                        alert('删除失败')
                    }
                }
            })
        });
    }

    function bindBtnEditEvent() {
        $('.btn-edit').click(function (){
            $('#formAdd')[0].reset();
            var uid = $(this).attr('uid');
            $.ajax({
                url: '/order/detail/',
                type: 'get',
                data: {
                    uid: uid,
                },
                dataType: 'JSON',
                success: function(res){
                    if (res.status) {
                        $.each(res.data, function(name, value) {
                            $("#id_" + name).val(value)
                        })
                        $('#myModalLabel').text('编辑');
                        $('#myModal').modal('show');
                    } else {
                        alert(res.error)
                    }
                }
            })
        })
    }
</script>
{% endblock %}